<template>
	<transition-group name="scale">
		<div class="search-bar" v-show="visible" key="search-bar">
			<div class="search-box">
				<el-input
					v-model="keyword"
					placeholder="搜索页面，支持标题、URL、拼音模糊查询"
					prefix-icon="search"
					class="el-input"
					@input="filterMethod"
					ref="searchInput"
					clearable
				>
					<template #suffix>
						<el-icon class="el-input__icon" :size="20"><Microphone /></el-icon>
					</template>
				</el-input>
				<div class="tips">
					<div class="tip">
						<span>Ctrl + K</span>
						/
						<span>ALT + S</span>
						唤醒搜索面板
					</div>
					<div class="tip">
						<span>
							<el-icon size="1.2em"><CaretTop /></el-icon>
						</span>
						<span>
							<el-icon size="1.2em"><CaretBottom /></el-icon>
						</span>
						切换搜索结果
					</div>
					<div class="tip">
						<span>
							<el-icon size="1.2em"><BottomLeft /></el-icon>
						</span>
						访问页面
					</div>
					<div class="tip">
						<span>ESC</span>
						退出
					</div>
				</div>
			</div>
			<div class="result" ref="result">
				<div class="result-item" v-if="instructMenuList.length">
					<div class="result-title">
						<el-icon class="el-icon"><Menu /></el-icon>
						智能指令搜索结果
					</div>
					<router-link
						:class="['item', { active: active === index }]"
						:to="item.path"
						v-for="(item, index) in instructMenuList"
						:key="index"
						@mouseenter="active = index"
						@click="closeSearchBar"
					>
						<div class="icon">
							<v-icon
								:name="item.icon || ''"
								size="30px"
								:color="active === index ? 'var(--el-color-primary)' : '#606266'"
							></v-icon>
						</div>
						<div class="info">
							<div class="title">{{ item.title }}</div>
							<div class="subtitle">{{ item.label }}</div>
							<div class="subtitle">{{ item.path }}</div>
						</div>
					</router-link>
				</div>
				<div class="result-item" v-if="flattenMenuList.length">
					<div class="result-title">
						<el-icon class="el-icon"><Menu /></el-icon>
						菜单{{ keyword ? "搜索结果" : "" }}
					</div>
					<router-link
						:class="['item', { active: active === instructMenuList.length + index }]"
						:to="item.path"
						v-for="(item, index) in flattenMenuList"
						:key="index"
						@mouseenter="active = index"
						@click="closeSearchBar"
					>
						<div class="icon">
							<v-icon
								:name="item.icon || ''"
								size="30px"
								:color="active === index ? 'var(--el-color-primary)' : '#606266'"
							></v-icon>
						</div>
						<div class="info">
							<div class="title">{{ item.title }}</div>
							<div class="subtitle">{{ item.label }}</div>
							<div class="subtitle">{{ item.path }}</div>
						</div>
					</router-link>
				</div>
			</div>
		</div>
		<div class="search-bar-modal" v-show="visible" key="search-bar-modal" @click="closeSearchBar"></div>
	</transition-group>
</template>

<script setup>
import { computed } from "vue"
import { useSearchBarStore } from "/store/search-bar"
import { useSearchBar } from "./modules"

const searchBarStore = useSearchBarStore()
const visible = computed({
	get: () => searchBarStore.visible,
	set: value => (searchBarStore.visible = value),
})
const { result, searchInput, keyword, active, flattenMenuList, instructMenuList, closeSearchBar, filterMethod } =
	useSearchBar(visible)
</script>

<style lang="scss" scoped>
.search-bar-modal {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 20000;
	background: rgba(#000, 0.5);
	backdrop-filter: blur(8px);
}
.search-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20001;
	max-width: 760px;
	margin: auto;
	.search-box {
		margin: 50px 0 20px;
		.el-input {
			height: 50px;
			.el-input__icon {
				cursor: pointer;
				&:hover {
					color: var(--el-color-primary);
				}
			}
		}
		.tips {
			margin-top: 20px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			line-height: 24px;
			font-size: 14px;
			background: #fff;
			border-radius: 7px;
			padding: 20px 0;
			color: var(--el-color-primary);
			span {
				margin: 0 5px;
				padding: 3px 8px 5px;
				border-radius: 5px;
				font-size: 12px;
				color: var(--el-color-primary);
				font-weight: 700;
				background-color: #f0f2f5;
				border: 1px solid var(--el-color-primary);
				display: inline-flex;
				justify-content: center;
				align-items: center;
				height: 24px;
			}
		}
	}
}
.result {
	background: #fff;
	height: calc(100vh - 188px - 57px);
	border-radius: 7px;
	overflow-y: auto;
	box-shadow: 0 0 1px #cdd0d6;
	.result-title {
		padding: 10px 20px;
		font-size: 17px;
		font-weight: 700;
		border-bottom: 1px solid #ebeef5;
		margin-top: 20px;
		letter-spacing: 2px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		&:first-child {
			margin-top: 0;
		}
		.el-icon {
			margin-right: 5px;
		}
	}
	.item {
		display: flex;
		justify-content: flex-start;
		transition: all 0.1s;
		align-items: flex-start;
		border-bottom: 1px solid #ebeef5;
		.icon {
			width: 66px;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 15px;
		}
		.info {
			padding: 10px 10px 12px;
			.title {
				color: #303133;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 18px;
				font-weight: 700;
				transition: all 0.1s;
				margin-bottom: 3px;
			}
			.subtitle {
				color: #303133;
				font-size: 12px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				transition: all 0.1s;
				margin-bottom: 3px;
			}
		}
		&.active {
			background: #f2f3f5;
			// .info {
			// 	border-left: 1px solid #dcdfe6;
			// 	.title {
			// 		color: #303133;
			// 	}
			// 	.subtitle {
			// 		color: #303133;
			// 	}
			// }
		}
	}
}

.scale-enter-active,
.scale-leave-active {
	transition: all 0.25s;
}
.scale-enter-from,
.scale-leave-to {
	opacity: 0;
	transform: scale(1.2);
}
</style>
